hover
|
С |
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS2 |
|
Застосовується |
Не
визначено |
|
Аналог
HTML |
<тег onmouseover="function()"> |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/selector.html#dynamic - pseudo - classes |
Опис
Визначає
стиль елементу при наведенні на нього курсора миші, але при цьому елемент ще не
активований, іншими словами кнопка миші не натиснута.
Синтаксис
E: hover {..
}
Тут E ім'я
селектора. Якщо селектор не вказаний, то hover застосовується до усіх елементів
документу.
Значення
Ні.
Приклад 1
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>link</title>
<style type="text/css">
a: link {
color: #0000d0; /* Колір посилань */
padding: 2px; /* Полів навколо тексту */
}
a: hover {
background: #786b59; /* Колір фону під
посиланням */
color: #ffe; /* Колір посилання */
}
</style>
</head>
<body>
<p><a href="link
1.html">Посилання 1</a></p>
<p><a href="link
2.html">Посилання 2</a></p>
<p><a href="link
3.html">Посилання 3</a></p>
</body>
</html>
У цьому
прикладі псевдоклас hover застосовується до посилання (тегу <A>), при
цьому міняється колір посилання і фону під нею. Результат прикладу показаний на
мал. 1.
Мал. 1.
Результат використання псевдокласу hover для посилань
Приклад 2
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>hover</title>
<style type="text/css">
UL {
width: 180px; /* Ширина меню */
list - style: none; /* Для списку
прибираємо маркери */
margin: 0; /* Немає відступів навколо */
padding: 0; /* Прибираємо поля навколо
тексту */
font - family: Arial, sans - serif; /*
Рубаний шрифт для тексту меню */
font - size: 10pt; /* Розмір назв в пункті
меню */
}
LI UL {
position: absolute; /* Підміню
позиціонуються абсолютно */
display: none; /* Приховуємо підміню */
margin - left: 165px; /* Зрушуємо підміню
управо */
margin - top: - 2em; /* Зрушуємо підміню
вверх */
}
LI A {
display: block; /* Посилання як блоковий
елемент */
padding: 5px; /* Полів навколо напису */
text - decoration: none; /* Підкреслення у
посилань прибираємо */
color: #666; /* Колір тексту */
border: 1px solid #ccc; /* Рамка навколо пунктів меню */
background - color: #f0f0f0; /* Колір фону
*/
border - bottom: none; /* Межу знизу не
проводимо */
}
LI A : hover {
color: #ffe; /* Колір тексту активного
пункту */
background - color: #5488af; /* Колір фону
активного пункту */
}
LI: hover UL {
display: block; /* При виділенні пункту
курсором миші відображається підміню */
}
. .brd {
border - bottom: 1px solid #ccc; /* Лінія
знизу */
}
</style>
</head>
<body>
<ul id="menu">
<li><a
href="russian.html">Російська кухня</a>
<ul>
<li><a href="linkr
1.html">Бефстроганов</a></li>
<li><a href="linkr
2.html">Гусак з яблуками</a></li>
<li><a href="linkr
3.html">Крупник новгородський</a></li>
<li><a href="linkr
4.html" class="brd">Раки по-російськи</a></li>
</ul>
</li>
<li><a
href="ukrainian.html">Українська кухня</a>
<ul>
<li><a href="linku
1.html">Вареники</a></li>
<li><a href="linku
2.html">Печеня по-харьковски</a></li>
<li><a href="linku
3.html">Капустняк чернігівський</a></li>
<li><a href="linku
4.html" class="brd">Потапцы з помідорами</a></li>
</ul>
</li>
<li><a
href="caucasus.html">Кавказька кухня</a>
<ul>
<li><a href="linkc
1.html">Суп-харчо</a></li>
<li><a href="linkc
2.html">Лилибдж</a></li>
<li><a href="linkc 3.html">Чихиртма</a></li>
<li><a href="linkc
4.html" class="brd">Шашлик</a></li>
</ul>
</li>
<li><a href="asia.html"
class="brd">Кухня Середньої Азії</a></li>
</ul>
</body>
</html>
У цьому
прикладі псевдоклас hover додається до елементу списку (тег <LI>) для
створення дворівневого меню. Результат прикладу показаний на мал. 2.
Мал. 2.
Використання hover для створення меню
Браузери
У браузері
Internet Explorer до версії 6.0 включно псевдоклас hover працює тільки для
посилань.
